import $ from '../js/jquery.min.js'
UE["isDouble"] = false;

UE.plugins['doubleClickImg'] = function () {
       var me = this;
        var	browser = UE.browser;
        var dom = UE.dom;
        var editorui = baidu.editor.ui;
        var utils = baidu.editor.utils;
     
        me.addListener('dblclick', function (type, e) {
          
            if (e.target.tagName == 'IMG' && me.body.contentEditable!="false") {
                var range = new dom.Range(me.document);
                range.selectNode(e.target).select();
                UE["isDouble"] = true;
                me.ui._dialogs["insertimageDialog"] && me.ui._dialogs["insertimageDialog"].open();
            }
        });
        
        var clickPop = new baidu.editor.ui.Popup({
            content: "",
            editor: me,
            _remove: function() {
                $(clickPop.anchorEl).remove();
                clickPop.hide();
                layer.msg('已删除',{icon:1});
            },
            _copy: function() {
                //$(clickPop.anchorEl).prop('outerHTML');
                clickPop.hide();
            	
            	 clickPop.hide();
            	 UE.getEditor('container').execCommand('copy');
            	 layer.msg('内容已经复制,试试Ctrl+V粘贴',{icon:1});
            },
            _cut:function(){
            	
            	clickPop.hide();
            	
            	 UE.getEditor('container').execCommand('copy');
            	 $(clickPop.anchorEl).remove();
            	 layer.msg('内容已经剪切,试试Ctrl+V粘贴',{icon:1});
            },
            _preblank: function() {
    	        $('<p><br/></p>').insertBefore(clickPop.anchorEl);
                clickPop.hide();
            },
            _blank: function() {
                $('<p><br/></p>').insertAfter(clickPop.anchorEl);
                clickPop.hide();
            },
          
            _onImgEditButtonClick:function (name) {
                this.hide();
                me.ui._dialogs[name].open();

            },
            _onImgSetFloat:function (value) {
                this.hide();
                me.execCommand("imagefloat", value);

            },
            _enlarge:function(){
            	var width = $(clickPop.anchorEl).width();
            	var height = $(clickPop.anchorEl).height();
            	var maxWidth = $(clickPop.anchorEl).parents('body').width();
            	if(width*1.1 >= maxWidth){
            		return;
            	}
            	$(clickPop.anchorEl).width(width*1.1);
            	$(clickPop.anchorEl).height(height*1.1);
            },
            _shrink:function(){
            	var width = $(clickPop.anchorEl).width();
            	var height = $(clickPop.anchorEl).height();
            	$(clickPop.anchorEl).width(width*0.9);
            	$(clickPop.anchorEl).height(height*0.9);
            },
            className: 'edui-bubble'
        });
        clickPop.render();
        
        
    
        	var _rotate = function() {
        		var move = false, x = 0, y = 0;
        		$('.rotate').on(
        				'mousedown',
        				function(e) {
        					
        					move = true;
        					x = e.pageX - parseFloat($('.rotate .marker').css('left'));
        					$('.rotate').on(
        							'mousemove',
        							function(e) {
        								
        								if (move) {
        									var newX = e.pageX - x;
        									var deg = newX - 145;
        									if (newX >= 296) {
        										newX = 296;
        										deg = 180;
        									} else if (newX <= 0) {
        										newX = 0;
        										deg = -180;
        									}
        									$('.rotate .marker').css('left', newX);
        									clickPop.anchorEl.style.transform='rotateZ(' + deg + 'deg)';
        									$('.rotate .complete').text(deg + '度');
        									$('.rotate .text').val(deg);
        								} else {
        									$(this).unbind('mousemove');
        								}
        							});

        				});
        		$('.rotate').on('mouseup', function(e) {
        			move = false;
        			$(this).unbind('mousemove');
        		});

        		$('.rotate .text').click(function() {
        			$(this).focus();
        			 this.select();
        		});
        		$('.rotate .text').keyup(function() {

        			var val = $.trim($(this).val());
        			if (val == "") {
        				val = 0;
        			} else {
        				val = parseInt(val);
        			}
        			if (val == "") {
        				val = 0;
        				$('.rotate .marker').css('left', (val + 145) + "px");
        			} else if (val >= 180) {
        				val = 180;
        				$(this).val('180');
        				$('.rotate .marker').css('left', (val + 115) + "px");

        			} else if (val <= -180) {
        				val = -180;
        				$(this).val('-180');
        				$('.rotate .marker').css('left', 0 + "px");
        			} else {

        				$('.rotate .marker').css('left', (val + 145) + "px");
        			}

//        			$(clickPop.anchorEl).css({
//						'transform':'rotateZ(' + deg + 'deg)',
//						'-webkit-transform':'rotateZ(' + deg + 'deg)',
//						'-moz-transform':'rotateZ(' + deg + 'deg)',
//					});
        			clickPop.anchorEl.style.transform='rotateZ(' + val + 'deg)';
					
        			$('.rotate .complete').text(val + '度');

        		});

        	}
        
        	
        me.addListener("click",function(t, evt) {
        	    	
        	        evt = evt || window.event;
        	        var el = evt.target || evt.srcElement;
        	        if (el.tagName != "IMG") {
        	             return;
        	        }
        	        
    	            var str = '<nobr class="content-operate">\
    	            	<div style="margin:10px 0;">\
    	            		<span onclick=$$._onImgSetFloat("none") class="edui-clickable">默认</span>\
    	            		<span onclick=$$._onImgSetFloat("left") class="edui-clickable">左对齐</span>\
	    	            	<span onclick=$$._onImgSetFloat("right") class="edui-clickable">右对齐</span>\
	    	            	<span onclick=$$._onImgSetFloat("center") class="edui-clickable">居中</span>\
	    	            	<span onclick="$$._onImgEditButtonClick(\'insertimageDialog\');" class="edui-clickable">换图</span>\
    	            	</div>\
    	            	<div style="margin:10px 0;">\
	    	                <span id="copy" onclick="$$._copy()" class="edui-clickable">复制</span>\
	    	                <span id="cut" onclick="$$._cut()" class="edui-clickable">剪切</span>\
	    	                <span onclick="$$._remove()" class="edui-clickable">删除</span>\
	    	                <span onclick="$$._preblank()" class="edui-clickable">前空行</span>\
	    	                <span onclick="$$._blank()" class="edui-clickable">后空行</span>\
    	            	</div>\
    	            	<div style="margin:10px 0;">\
	    	            	<span onclick="$$._enlarge()" class="edui-clickable">放大</span>\
	    	                <span onclick="$$._shrink()" class="edui-clickable">缩小</span>\
		                </div>\
    	                <div style="margin:10px 0;">\
    	                    <div class="rotate slider" style="height:20px;margin-bottom:5px;background:#868585;position:relative;" data-param-init-value="50">\
    	            			<span style="float:right;z-index: 5;color: #999;height:20px;line-height: 20px;font-size: 10px;">\
    	            				<input type="text" class="text"  style="width:60px;height:18px;position:absolute;right:0px;top:0;border:1px solid #fff;" placeholder="输入角度"/>\
    	                        </span>\
    	            			<span style="position:absolute;right:100px;">旋转角度</span>\
    	                        <div class="complete" style="width: 145px;text-align:center;">0度</div>\
    	                        <div class="marker" style="left:145px;position:absolute;top:0px;width:12px;height:20px;background:rgba(0,0,0,.6);cursor:pointer;"></div>\
    	                	</div>\
    	                </div>\
    	            </nobr>';
    	            var html = clickPop.formatHtml(str);
    	            var content = clickPop.getDom('content');
    	            content.innerHTML = html;
    	            clickPop.anchorEl = el;
    	            clickPop.showAnchor(clickPop.anchorEl);



    	            
    	         	_rotate();
                
        });
 }



